<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>支付成功</title>
    <link href="css/common.css" rel="stylesheet" type="text/css">
    <link href="css/layer.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="./js/common.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/layer.js"></script>
    <script type="text/javascript" src="./js/weixinorder.js"></script>
</head>
<style>
    body {
        width: 7.5rem;
        height: 100%;
        background-color: #F9F9F9;
    }
    
    #app {
        opacity: 0;
    }
    
    .allcontop {
        width: 7.50rem;
        min-height: 5rem;
        background: linear-gradient(180deg, #218FFF 0%, #F9F9F9 100%);
    }
    
    .picimg {
        width: 3.27rem;
        height: 1.31rem;
        margin: auto;
        padding-top: .48rem;
    }
    
    .picimg img {
        width: 3.27rem;
        height: 1.31rem;
    }
    
    .priceall {
        width: 6.9rem;
        height: 1.45rem;
        line-height: 1.45rem;
        background: url(./img/newimg/priceimg.png) no-repeat 100%;
        background-size: 100% 100%;
        margin: .7rem auto 0;
        color: #333333;
        font-size: .6rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: baseline;
    }
    
    .priceall span {
        font-size: .36rem;
    }
    
    .allcontent {
        width: 6.60rem;
        background: #FFFFFF;
        box-shadow: 0 0.06rem .17rem 0.01rem rgba(223, 223, 223, 0.22);
        border-bottom-left-radius: .1rem;
        border-bottom-right-radius: .1rem;
        margin: 0rem auto 0;
    }
    
    .item {
        width: 6.2rem;
        margin: auto;
        line-height: .9rem;
        display: flex;
        justify-content: space-between;
        font-size: .28rem;
    }
    
    .itemleft {
        color: #999999;
    }
    
    .itemright {
        width: 5rem;
        color: #333333;
        text-align: right;
        word-wrap: break-word;
    }
    
    .bottompic {
        position: fixed;
        bottom: .25rem;
        width: 1.81rem;
        height: .47rem;
        left: 50%;
        margin-left: -0.95rem;
    }
    
    .bottompic img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div id='app'>
        <div v-if="chenload">
            <div class="allcontop">
                <div class="picimg">
                    <img src="img\newimg/paysuccess.png" />
                </div>
                <div class="priceall">
                    <span>￥</span>{{price}}
                </div>
                <div class="allcontent">
                    <div class="item" id='courseid'>
                        <div class="itemleft">产品名称</div>
                        <div class="itemright" id='coursename'>{{course}}</div>
                    </div>
                    <div class="item">
                        <div class="itemleft">用户电话</div>
                        <div class="itemright" id='phone'>{{tel}}</div>
                    </div>
                    <div class="item" id='isshowname'>
                        <div class="itemleft">用户姓名</div>
                        <div class="itemright" id='name'>{{name}}</div>
                    </div>
                </div>
            </div>
            <div class="bottompic">
                <img src="img/newimg/logn.png" />
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/vue-router.js"></script>
    <script type="text/javascript" src="./js/base64.js?a=220907"></script>
    <script type="text/javascript">
        var app2 = new Vue({
            el: '#app ',
            data: {
                chenload: true,
                price: '',
                course: '',
                name: '',
                tel: '',
            },
            methods: {
                GetQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]);
                    return null;
                }
            },
            mounted() {
                var that = this;
                var obj = JSON.parse(that.GetQueryString('obj'));
                that.course = Base64.decode(obj.course);
                that.name = Base64.decode(obj.name);
                that.tel = obj.tel;
                that.price = obj.price;
                $('#app').css('opacity', 1);
            }
        })
    </script>
</body>

</html>